<template>
  <div>
    <div class="InputModule">
      <div
        class="login"
        v-if="!isLogin"
        @mouseover="isHover(1)"
        @mouseleave="leavePrompt"
      >
        <div class="loginText">
          <a href="#">登录</a>
        </div>
      </div>
      <div v-if="isLogin">
        <img :src="imgUrl[imgIndex]" alt="" />
      </div>
      <div class="box2">
        <textarea
          v-model="content"
          @input="adjustHeight"
          placeholder="请输入评论内容"
          @focus="activate"
          @blur="deactivate"
        ></textarea>
      </div>
      <div class="box3" v-show="IsActivate">
        <button
          style="
            background-color: #fff;
            width: 40px;
            height: 34px;
            border-radius: 10px;
            border: 1px solid #f1f2f3;
          "
        >
          <img src="../components/icons/表情.png" alt="" />
        </button>
        <button
          class="ButtonPost"
          :class="{ active: content.length > 0 }"
          @click="post(SubjectId)"
        >
          发布
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import * as jose from "jose";
import instance from "@/utils/request";
export default {
  props: {
    SubjectId: {
      type: Number,
    },
  },
  data() {
    return {
      IsActivate: false,
      IsNameChangeActivate: false,
      input: "input",
      content: "",
      UserId: null,
      username: "尘枫KaeDe",
      imgIndex: null,
      isLogin: false,
      text: [],
      imgUrl: [
        "/images/1.jpg",
        "/images/1.jpg",
        "/images/2.jpg",
        "/images/3.jpg",
        "/images/4.jpg",
        "/images/5.jpg",
        "/images/6.jpg",
      ],
    };
  },
  mounted() {
    if (localStorage.getItem("token")) {
      const tokenDecode = jose.decodeJwt(localStorage.getItem("token"));
      this.imgIndex = tokenDecode.imgCode;
      this.UserId = tokenDecode.id;
      this.isLogin = true;
    }
  },
  methods: {
    async post(num) {
    if (this.content) {
        if (confirm("确定要发表内容吗？")) {
        const data = {
            userId: this.UserId,
            text: this.content,
            subjectId: num
        };
        try {
            const res = await instance.post("subject/parent", data);
            if (res.data.msg === "NOT_LOGIN") {
                this.$store.dispatch('updateNotLogin',true);
            }
            if (res.data.code === 1) {
                this.content = "";
                this.IsActivate = false;
                window.location.reload();
            }
        } catch (error) {
            console.error(error);
        }
        }
    }
    },
    nameChange() {
      this.IsNameChangeActivate = !this.IsNameChangeActivate;
    },
    activate() {
      this.IsActivate = true;
    },
    deactivate() {
      if (this.content) {
        return;
      } else {
        this.IsActivate = false;
      }
    },
    adjustHeight() {
      const textarea = event.target;
      textarea.style.height = "auto"; // 重置高度
      textarea.style.height = textarea.scrollHeight + "px"; // 设置为内容的高度
    },
    clearInput() {
      this.username = "";
    },
    updateName(event) {
      if (event.target.value.length <= 14) {
        this.inputValue = event.target.value;
      } else {
        alert("用户名不能超过14个字符,请重新输入");
        this.username = "";
        return;
      }
    },
  },
}  
</script>

<style scoped>
.InputModule {
  width: 80vw;
  height: 120px;
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
.InputModule div img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}
.box2 {
  width: 74vw;
}
.InputModule .box2 textarea {
  background-color: #f1f2f3;
  /* padding-top: 31px; */
  width: 40vw;
  min-height: 62px;
  box-sizing: border-box;
  line-height: 1.5;
  padding: 10px 10px;
  border-radius: 10px;
  border: none;
  /* line-height: 62px; */
  font-size: 15px;
  text-align: left;
  outline: none;
  resize: none;
  overflow: hidden;
}
.InputModule .box3 {
  width: 40vw;
  height: 38px;
  padding-left: 7%;
  margin: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.InputModule .box2 .input:-moz-placeholder {
  color: #999;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
}
.InputModule .box2 .input::-moz-placeholder {
  color: #999;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
}
.InputModule .box2 .input::-webkit-input-placeholder {
  color: #999;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  vertical-align: middle;
}
.InputModule .box3 button img {
  width: 17px;
  height: 17px;
  margin: 8px auto;
}
.InputModule textarea:hover {
  background-color: #fff;
  border: 1px solid #c9ccd0;
}
.InputModule textarea:focus {
  background-color: #fff;
  border: 1px solid #c9ccd0;
}
.ButtonPost {
  width: 86px;
  height: 40px;
  color: white;
  background-color: #7fd6f5;
  border: none;
  border-radius: 10px;
}
.ButtonPost:hover {
  background-color: #00aeec;
}
.active {
  background-color: #00aeec;
}
.login .loginText a {
  display: block;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-size: 24px;
  margin: auto 0;
}
.login .loginText {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 60px;
  height: 60px;
}
.login {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #00aeec;
}
</style>